/**
 * Created by wei on 17/11/28.
 */

import React, { Component } from 'react';
import axios from 'axios';
import base from '../base.js';
import PropTypes from 'prop-types';
import cookie from '../cookie.js';
import AlertContainer from 'react-alert'
import DivShow from '../front/divshow';
import EditImage from './editimage';
import Info from './info';
import './person.css'

const basePath = base().basePath;

const selfToken = cookie.getCookie('token');

class SimpleShow extends Component{

    render(){
        const {label, value}= this.props;

        return (
            <div>
                <div className="wi100 height28px" style={{paddingTop:'5px'}}>
                    <div className="float_l" style={{width:'25%', textAlign:'right' , color:'#9b8878',fontSize:'14px'}}>
                        {label}:
                    </div>
                    <div className="float_l" style={{width:'75%' , color:'#9b8878',fontSize:'14px'}}>
                        <span>{value}</span>
                    </div>
                </div>
                <div className="comments_header"></div>
            </div>
        );
    }
}

SimpleShow.propTypes = {
    label: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
};




class SimpleEditShow extends Component{


    constructor(props){
        super(props);
        this.state = {
            edit:false,
            value:"",
            label:"",
            type:"",
            token:'',
        };
    }

    componentWillReceiveProps(nextProps){
        const {label, value, type, token}= nextProps;
        this.setState({
            edit: false,
            value: value,
            label: label,
            type: type,
            token: token,
            source:'',
            target:'',
        });
    }

    edit(){
        this.setState({
            edit: true,
        });
    }

    change(e){
        this.setState({
            value: e.target.value,
        });
    }

    changeSource(e){
        this.setState({
            source: e.target.value,
        });
    }

    changeTarget(e){
        this.setState({
            target: e.target.value,
        });
    }

    save(){
        const {fnEdit} = this.props;
        if(this.state.type === 'text' || this.state.type === 'textArea'){
            fnEdit(this.state.value);
        }else if(this.state.type === 'password'){
            fnEdit(this.state.source, this.state.target);
        }
    }

    render(){

        let inp;
        if(this.state.type === "text"){
            inp = (<input onChange={(e)=>this.change(e)} type="text" value={this.state.value} style={{padding:'3px 5px'}} size={40}/>);
        }else if(this.state.type === "textArea"){
            inp = (<textarea onChange={(e)=>this.change(e)} value={this.state.value}  type="text" style={{padding:'3px 5px'}} cols={40} rows={3}>
                    </textarea>);
        }else if(this.state.type === 'password'){
            //
            inp = (
                <div>
                    <input onChange={(e)=>this.changeSource(e)} type="text" value={this.state.source} style={{padding:'3px 5px'}} size={20} placeholder="原密码." />
                    &nbsp;-&nbsp;
                    <input onChange={(e)=>this.changeTarget(e)} type="text" value={this.state.target} style={{padding:'3px 5px'}} size={20} placeholder="新密码." />
                </div>
            );
        }

        let modify, save;
        if(this.state.token == selfToken){
            modify = (
                <div className="float_l" style={ this.state.edit ?  {width:'15%', display:'none'} : {width:'15%'}}>
                    <a style={{padding: '3px'}} onClick={this.edit.bind(this)} href="javascript:;" className="btn2">修改</a>
                </div>
            );

            save = (
                <div className="float_l" style={ this.state.edit ?  {width:'15%'} : {width:'15%', display:'none'}}>
                    <a style={{padding: '3px'}} onClick={this.save.bind(this)} href="javascript:;" className="btn2">保存</a>
                </div>
            );
        }
        return (
            <div>
                <div className="wi100" style={{paddingTop:'5px'}}>
                    <div className="float_l" style={{width:'25%', textAlign:'right', color:'#9b8878',fontSize:'14px'}}>
                        <span style={{padding: '3px'}}>{this.state.label}:</span>
                    </div>
                    <div className="float_l" style={ this.state.edit ?  {width:'60%', display:'none'} : {width:'60%'}}>
                        <span style={{padding: '3px', color:'#9b8878',fontSize:'14px'}}>{this.state.value}&nbsp;</span>
                    </div>
                    {modify}
                    <div className="float_l" style={ this.state.edit ?  {width:'60%'} : {width:'60%', display:'none'}}>
                        <span>
                            {inp}
                        </span>
                    </div>
                    {save}
                </div>
                <div className="comments_header"></div>
            </div>
        );
    }

}

SimpleEditShow.propTypes = {
    label: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    fnEdit: PropTypes.func.isRequired,
    token: PropTypes.string.isRequired,
};


class Information extends Component{
    constructor(props){
        super(props);
        this.state = {
            token: cookie.getCookie('token'),
            informations: [],
            editImageShow: false,
            user:{},
        }
    }

    componentWillReceiveProps(nextProps){
        const {token, user} = nextProps;
        this.setState({
            token: token,
            user: user
        });
    }

    componentDidMount(){
        axios.get(basePath+"/information/find", {headers: { token: this.state.token }
        }).then(
            (res) => {
                this.setState({
                    informations: res.data,
                });
            }
        );
    }

    refresh(){
        axios.get(basePath+"/user/find", {headers: { token: this.state.token }
        }).then(
            (res) => {
                var user = res.data;
                this.setState({
                    user: user,
                });
            }
        );
    }

    alertOptions = {
        offset: 14,
        position: 'top right',
        theme: 'light',
        time: 2000,
        transition: 'scale'
    }


    fnSaveNickPassword(source, target){
        if(target.length < 5){
            this.msg.error("密码长度需要大于4位!");
            return;
        }
        var that = this;
        axios.post(basePath+"/user/edit/password",{'source': source, 'target': target}, {headers: { token: this.state.token }})
            .then(
                (res) => {
                    if(res.data && res.data.result === 'SUCCESS'){
                        this.msg.info(res.data.description);
                        this.setState({
                            user: this.state.user,
                        });
                    }else{
                        this.msg.error(res.data.description);
                    }
                }
            )
    }

    fnSaveNickName(v){
        var that = this;
        axios.post(basePath+"/user/edit/nickname",{'nickname': v}, {headers: { token: this.state.token }})
            .then(
                (res) => {
                    if(res.data && res.data.username){
                        this.setState({
                            user: res.data,
                        });
                        cookie.setCookie("nickname",res.data.nickname);
                    }else{
                        this.msg.error('昵称已存在.')
                    }
                }
            )
    }


    fnSaveDescription(v){
        var that = this;
        axios.post(basePath+"/user/edit/description",{'description': v}, {headers: { token: this.state.token }})
            .then(
                (res) => {
                    // console.log(JSON.stringify(res));
                    this.setState({
                        user: res.data,
                    });
                }
            )
    }

    editUserImage(){
        this.setState({
            editImageShow: true,
        });
    }


    closeEditUserImage(){
        // console.log("xxxxx")
        this.setState({
            editImageShow: false,
        });
        this.refresh();
    }


    render(){

        let info, username, password;
        if(selfToken == this.state.token){
            info = (
                <div className="border1px marginTB5 marginLR5 float_l" style={{width:'20%'}}>
                    <div style={{width:'200px',height:'200px',margin:'10px auto'}}>
                        <a onClick={this.editUserImage.bind(this)} href="javascript:;">
                            <img style={{width:'200px', height:'200px'}} src={this.state.user.avatar}/>
                        </a>
                    </div>
                    <div>
                        <div style={{margin:'auto', width:'60px', padding:'2px'}}><a onClick={this.editUserImage.bind(this)} href="javascript:;" className="btn2">编辑</a></div>
                    </div>
                </div>
            );

            username = (
                <SimpleShow label="用户名" value={this.state.user.username}/>
            );

            password = (
                <SimpleEditShow token={this.state.token} fnEdit={this.fnSaveNickPassword.bind(this)} type="password" label="密码" value="*******"/>
            );

        }else{
            info = (
                <div className="border1px marginTB5 marginLR5 float_l" style={{width:'20%'}}>
                    <div style={{width:'200px',height:'200px',margin:'10px auto'}}>
                        <img style={{width:'200px', height:'200px', borderRadius:'100px'}} src={this.state.user.avatar}/>
                    </div>
                    <div>
                        <div style={{margin:'auto', width:'60px', padding:'2px'}}>&nbsp;</div>
                    </div>
                </div>
            );
        }


        return (
            <div className="wi100" style={{marginTop:'20px'}}>
                <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
                <DivShow close={this.closeEditUserImage.bind(this)} visible={this.state.editImageShow}>
                    <EditImage close={this.closeEditUserImage.bind(this)} user={this.state.user}/>
                </DivShow>
                {info}
                <div className="border1px marginTB5 marginLR5 height100 float_l" style={{width:'46%'}}>
                    {username}
                    <SimpleEditShow token={this.state.token} fnEdit={this.fnSaveNickName.bind(this)} type="text" label="昵称" value={this.state.user.nickname}/>
                    <SimpleShow label="等级" value={this.state.user.level}/>
                    <div>
                        <div className="wi100 height28px" style={{paddingTop:'5px'}}>
                            <div className="float_l" style={{width:'25%', textAlign:'right' , color:'#9b8878',fontSize:'14px'}}>
                                赞:
                            </div>
                            <div className="float_l" style={{width:'25%' , color:'#9b8878',fontSize:'14px'}}>
                                <span>{this.state.user.allLike}</span>
                            </div>
                            <div className="float_l" style={{width:'5%', textAlign:'right' , color:'#9b8878',fontSize:'14px'}}>
                                踩:
                            </div>
                            <div className="float_l" style={{width:'25%' , color:'#9b8878',fontSize:'14px'}}>
                                <span>{this.state.user.allHate}</span>
                            </div>
                        </div>
                        <div className="comments_header"></div>
                    </div>
                    {password}
                    <SimpleEditShow token={this.state.token}  fnEdit={this.fnSaveDescription.bind(this)} type="textArea" label="签名" value={this.state.user.description}/>
                </div>
                <div className="border1px marginTB5 marginLR5 float_l" style={{width:'30%', color:'#9b8878',fontSize:'14px'}}>
                    <div className="wi100 height28px">
                        <div style={{width:'80px',margin: '0 auto'}}>消息中心</div>
                    </div>
                    <div className="comments_header"></div>
                    <div className="wi90 height100 marginAuto">
                       <Info informations={this.state.informations}/>
                    </div>
                </div>
            </div>
        );
    }

}

Information.propTypes = {
    user: PropTypes.object.isRequired,
    // visible: PropTypes.bool.isRequired,
    token: PropTypes.string.isRequired,
};


export default Information;